import { listSimpleDept } from "@/api/system/dept";
import { listSimplePosts } from "@/api/system/post";
import { createUser, updateUser } from "@/api/system/user";
import { BasicDrawer, useDrawerInner } from "@/components/Drawer";
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import { DICT_TYPE, getDictOptions } from "@/utils/dict";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";

const DetailDrawer = (props: { register: Fn }) => {
	const { t } = useTranslation();

	const [isUpdated, setIsUpdated] = useState(false);
	const getTitle = useMemo(() => {
		return isUpdated ? t("system.user.editUserInformation") : t("system.user.addUserInformation");
	}, [isUpdated]);

	const schemas: FormSchema[] = [
		{
			label: t("system.user.id"),
			field: "id",
			show: false,
			component: "Input"
		},
		{
			label: t("system.user.nickname"),
			field: "nickname",
			required: true,
			component: "Input"
		},
		{
			label: t("system.user.avatar"),
			field: "avatar",
			component: "FileUpload",
			componentProps: {
				maxCount: 1,
				fileType: "image"
			}
		},
		{
			label: t("system.user.deptName"),
			field: "deptId",
			required: true,
			component: "ApiTreeSelect",
			componentProps: {
				api: () => listSimpleDept(),
				handleTree: "id"
			}
		},
		{
			label: t("system.user.mobile"),
			field: "mobile",
			required: true,
			defaultValue: 0,
			component: "InputNumber"
		},
		{
			label: t("system.user.email"),
			field: "email",
			required: true,
			component: "Input"
		},
		{
			label: t("system.user.username"),
			field: "username",
			component: "Input",
			dynamicDisabled: ({ values }) => !!values.id
		},
		{
			label: t("system.user.password"),
			field: "password",
			component: "InputPassword",
			ifShow: ({ values }) => !values.id
		},
		{
			label: t("system.user.sex"),
			field: "sex",
			component: "Select",
			componentProps: {
				options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
			}
		},
		{
			label: "岗位",
			field: "postIds",
			component: "ApiSelect",
			defaultValue: [],
			componentProps: {
				api: () => listSimplePosts(),
				labelField: "name",
				valueField: "id",
				mode: "tags"
			}
		},
		{
			label: "状态",
			field: "status",
			component: "Select",
			componentProps: {
				options: getDictOptions(DICT_TYPE.COMMON_STATUS)
			}
		},
		{
			label: "备注",
			field: "remark",
			component: "InputTextArea"
		}
	];
	const [registerForm, { resetFields, setFieldsValue, validateFields }] = useForm({
		labelWidth: 120,
		baseColProps: { span: 24 },
		schemas,
		showActionButtonGroup: false,
		actionColOptions: { span: 23 }
	});
	const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(props.register, async data => {
		resetFields();
		setDrawerProps({ confirmLoading: false });
		setIsUpdated(!!data?.isUpdated);
		if (data?.isUpdated) {
			setFieldsValue({
				...data?.record
			});
		}
	});

	const handleSubmit = async () => {
		try {
			const values = await validateFields();
			setDrawerProps({ confirmLoading: true });
			if (isUpdated) await updateUser(values);
			else await createUser(values);
			closeDrawer();
		} finally {
			setDrawerProps({ confirmLoading: false });
		}
	};

	return (
		<BasicDrawer {...props} title={getTitle} register={registerDrawer} showFooter={true} ok={handleSubmit}>
			<BasicForm register={registerForm}></BasicForm>
		</BasicDrawer>
	);
};

export default DetailDrawer;
